{% extends "partials/layout.html" %}

{% block css %}
<link rel="stylesheet" type="text/css" href="{{baseUrl}}/static/css/product.css"/>
{% endblock %}

{% block content %}
<div id="tplItem" style="display: none">
    <a href="./detail.html?id=${id}">
        <div class="item ${style}">
            <img src="${img}" class="${f2_style} ${f3_style}"/>
            <p class="name">${title}</p>
            <p class="price">
              <span>售价 ¥${price}</span>
              <span>市场价 <i>¥${market_price}</i></span>
            </p>
        </div>
    </a>
</div>
<div class="pro">
  <img class="banner" src="{{baseUrl}}/static/img/pro_banner.jpg" />
  <div class="container ">
      <div class="tabs">
        <div class="tab on">科研试剂</div>
        <div class="tab">耗材</div>
        <div class="tab">仪器</div>
      </div>
    <div class="box">
      <ul class="left"></ul>
      <div class="center">
        <div class="search">
          <input type="text" placeholder="请输入您要搜索的内容" />
          <a href="javascript:void(0)" class="button">搜索</a>
        </div>
        
        
        <div class="list"></div>
        <div id="tmpPro1" style="display:none;">
          <div class="group">
            <p class="title">${title}</p>
            <ul>
              <li>
                <p>${name}<span>MORE +</span></p>
                <div class="detail">
                  ${detail}
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
      <div class="f1">
      <p class="tit">试剂</p>
      <div class="row" id="products_f1">

      </div>
      </div>
      <div class="f2">
          <p class="tit">耗材</p>
          <div class="row" id="products_f2">

          </div>
      </div>
      <div class="f3">
          <p class="tit">仪器</p>
          <div class="row" id="products_f3">

          </div>
      </div>
  </div>
</div>

<script type="text/javascript" src="{{baseUrl}}/static/js/data.js"></script>
<script type="text/javascript" src="{{baseUrl}}/static/js/product.js"></script>
<script type="text/javascript" src="{{baseUrl}}/static/js/data_pro1.js"></script>
<script type="text/javascript">
  (function(){
    init();
    function init(){
      let $left = $('.left');
      let leftNav = [];
      for(var i = 0; i < data.length; i++){
          leftNav.push((i === 0 ? '<li class="on">' : '<li>')+ data[i].method +'</li>')
      }
      $left.html(leftNav.join(''));
      initCenter(0);
    }

    function initCenter(navIndex){
      var tplItem = $('#tmpPro1').find('ul').html();
      var tplGroup = $('#tmpPro1').html();
      var groups = [];
      for(var i = 0; i < data[navIndex].groups.length; i++){
        var itemList = data[navIndex].groups[i].list;
        var items = [];
        for(var j = 0; j < itemList.length; j++){
          items.push(utility.tmplFormat(tplItem, itemList[j]));
        }
        var $group = $("<div>"+ utility.tmplFormat(tplGroup, data[navIndex].groups[i]) + '</div>');
        $group.find('ul').html(items.join(''));
        groups.push($group.html())
      }
      $('.center .list').html(groups.join(''));
    }

    $('.left li').click(function(){
      var $sender = $(this);
      if($sender.hasClass('on')) return;

      $sender.siblings().removeClass('on');
      $sender.addClass('on');
      initCenter($sender.index());
    });

    $('.center').on('click', 'li > p', function(){
      var $sender = $(this);
      var $detail = $sender.siblings();
      var isOpen = false;
      if(!$sender.hasClass('open')){
        $sender.addClass('open');
        $sender.find('span').text('MORE -');
        isOpen = true;
      }
      $detail.slideToggle(500, function(){
        if(!isOpen){
          $sender.removeClass('open');
          $sender.find('span').text('MORE +');
        }
      });
    })
  })();
</script>
{% endblock %}
